import { useContext } from "react";

import MyContext from "../contexts/MyContext";
import Counter from "../contexts/Counter";

const Msg = () => {
  const name = useContext(MyContext);
  const obj = useContext(Counter);

  // return (
  //   <button onClick={obj.increment}>
  //     Msg - {name} - {obj.value}
  //   </button>
  // );

  return (
    <MyContext.Consumer>
      {(name) => (
        <Counter.Consumer>
          {(obj) => (
            <button onClick={obj.increment}>
              Msg - {name} - {obj.value}
            </button>
          )}
        </Counter.Consumer>
      )}
    </MyContext.Consumer>
  );
};

export default Msg;
